<template>
  <el-dialog title="题目预览"  :visible.sync="dialogVisible" center :append-to-body='true' :lock-scroll="false" width="80%" @close="close">
             <el-row :gutter="20">
               <el-col :span="6"><div class="grid-content bg-purple" v-if="quesData.questionType==='1'">【题型】：单选题</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple" v-if="quesData.questionType==='2'">【题型】：多选题</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple" v-if="quesData.questionType==='3'">【题型】：简答题</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple">【编号】：{{quesData.id}}</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple" v-if="quesData.difficulty==='1'">【难度】：简单</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple" v-if="quesData.difficulty==='2'">【难度】：一般</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple" v-if="quesData.difficulty==='3'">【难度】：困难</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple">【标签】：{{quesData.tags}}</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple">【学科】：{{quesData.subjectName}}</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple">【目录】：{{quesData.directoryName}}</div></el-col>
               <el-col :span="6"><div class="grid-content bg-purple">【方向】：{{quesData.direction}}</div></el-col>
             </el-row>
             <hr>
             【题干】：
             <span v-html="quesData.question"></span>
              <!-- 单选 -->
             <div v-if="quesData.questionType==='1'">
               <div>单选题 选项：（以下选中的选项为正确答案）</div>
               <br>
               <template>
                 <el-radio  v-model="item.isRight" v-for="item in quesData.options" :key="item.id" :label="1" style="display:block;margin-bottom:10px">{{item.title}}</el-radio><br>
               </template>
             </div>
             <!-- 多选 -->
             <div v-if="quesData.questionType==='2'">
               <div>多选题 选项：（以下选中的选项为正确答案）</div>
               <br>
               <template>
                 <el-checkbox-group v-model="checkList">
                    <el-checkbox  v-for="item in quesData.options" :key="item.id" :label="item.title" style="display:block;margin-bottom:10px">{{item.title}}</el-checkbox>
                 </el-checkbox-group>
               </template>
             </div>
             <!-- 简答不要选择框 -->
             <hr>
              【参考答案】：<el-button type="danger" size="small" @click.native="video">视频答案预览</el-button>
              <div  class="videoA" v-show="show">
                <video :src="quesData.videoURL" ref="video" controls="controls"  style="width:30%;margin-top:10px"></video>
              </div>
              <hr>
              <span v-html="`【答案解析】：${quesData.answer}`"></span>
              <hr>
              <br>
              【题目备注】：{{quesData.remarks}}
           </el-dialog>
</template>

<script>
// 导入基础题库详情
import { detail } from '@/api/hmmm/questions'
export default {
  data () {
    return {
      dialogVisible: false, // 弹框是否显示
      checkList: [], // 多选默认选中框
      show: false, // 视频是否显示
      quesData: {
        questionType: '', // 题型
        id: '', // 编号
        difficulty: '', // 难度
        tags: '', // 标签
        subjectName: '', // 学科
        directoryName: '', // 目录
        direction: '', // 方向
        question: '', // 题干
        options: [], // 选项
        answer: '', // 答案解析
        remarks: ''// 题目备注
      }
    }
  },
  methods: {
    // 弹层显示
    dialogFromShow () {
      this.dialogVisible = true
    },
    // 弹层隐藏
    dialogFromHidden () {
      this.dialogVisible = false
      this.$refs.video.play()
    },

    // 获取列表详情
    getDetail (row) {
      console.log(row)
      detail(row).then(res => {
        console.log(res)
        this.quesData = res.data
        // 多选框选项回填
        res.data.options.forEach(item => {
          if (item.isRight === 1) {
            this.checkList.push(item.title)
          }
        })
      })
    },
    // 当前视频显示
    video () {
      this.show = true
    },
    // 关闭弹框
    close () {
      this.show = false
      this.$refs.video.pause()
    }
  }

}
</script>

<style scoped lang='less'></style>
